/*商品的搜索列表路由组件*/

import React, {Component} from 'react'
import {Card,Select,Input,Icon,Button,Table,message} from 'antd'
import LinkButton from '../../components/link-button'
import {reqProducts,reqSearchProducts,reqUpdateProductStatus} from '../../api'
import {PAGE_SIZE} from '../../util/constants'

const {Option} = Select

export default class ProductIndex extends Component {

  state = {
    products: [],
    total:0,
    loading: false,
    searchType: 'productName',
    searchName: ''
  }

  getProducts = async (pageNum)=>{

    this.pageNum = pageNum

    this.setState({
      loading: true
    })
    const{searchType,searchName} = this.state
    let result
    if(!searchName){
      result = await reqProducts(pageNum,PAGE_SIZE)
    }else{
      result = await reqSearchProducts({searchType,searchName,pageNum,pageSize:PAGE_SIZE})
    }


    this.setState({
      loading: false
    })
    if(result.status===0){
      const {list,total} = result.data
      this.setState({
        products: list,
        total
      }
     )
    }
  }

  switchSellingStatus = async (productId,status)=>{
    const result = await reqUpdateProductStatus({productId,status})
    message.success('SellingStatusChanged')
    if(result.status===0){
      this.getProducts(this.pageNum)
    }
  }

  componentDidMount() {
    //在渲染结束后加载指定页面的商品列表
    this.getProducts(1)
  }

  componentWillMount(){
    this.columns = [
      {
        title: 'Product Name',
        dataIndex: 'name',
      },
      {
        title: 'Description',
        dataIndex: 'desc',
      },
      {
        title: 'Price',
        dataIndex: 'price',
        render: (price) => '$'+price
      },
      {
        title: 'SellingStatus',
        render: (product) => {
          const btnText = product.status=== 1 ? 'Fulfillable':'Unfulfillable'
          const text = product.status===1 ? 'Unfulfillable':'Fulfillable'
          const productId = product._id
          const status = product.status===1?2:1

          return(
            <span>
              <Button type={"primary"}
              onClick={()=>this.switchSellingStatus(productId,status)}
              >{btnText}</Button> &nbsp;
              <span>{text}</span>
            </span>
          )
        }
      },
      {
        title: 'Actions',
        render: (product)=>{
          return(
            <span>
              <LinkButton onClick={()=>this.props.history.push('/product/detail',{product})}>Details</LinkButton>
              <LinkButton onClick={()=>this.props.history.push('/product/addupdate',{product})}>Update</LinkButton>
            </span>
          )
        }
      }
    ]
  }

  render () {

    const {products,loading,total,searchType,searchName} = this.state

    const title = (
      <span>
        <Select
          style={{marginRight: 10}}
          value={searchType}
          onChange={value => this.setState({searchType: value})}
        >
          <Option value='productDesc'>Search by description</Option>
          <Option value='productName'>Search by name</Option>
        </Select>
        <Input
          placeholder='Enter'
          style={{width: 200,marginRight: 10}}
          value={searchName}
          onChange={e => this.setState({searchName: e.target.value})}
        />
        <Button
          type='primary'
          onClick={()=>this.getProducts(1)}
        >
          Search
        </Button>
      </span>
    )
    const extra = (
      <Button onClick={() => this.props.history.push('/product/addupdate')}>
        <Icon type='plus'/>
        Add a product
      </Button>
    )
    return (
      <Card title={title} extra={extra}>
        <Table
          bordered
          rowKey='_id'
          dataSource={products}
          columns={this.columns}
          loading={loading}
          pagination={{total, pageSize: PAGE_SIZE, showQuickJumper: true, showSizeChanger: true}}
          onChange={(pageNum)=>this.getProducts(pageNum.current)}
        />
      </Card>
    )
  }
}